<script lang="ts" setup>
import type {ChatPreListItem} from "@/interface/Chat";
import {formatTimeDifference} from "@/utils/time";

const props = defineProps<{
  msgItem: ChatPreListItem,
}>()
const goChat = () => {
  uni.navigateTo({
    url: '/subPkg/chat/chat?receiverId=' + props.msgItem.userId + '&receiverName=' + props.msgItem.name + '&receiverAvatar=' + props.msgItem.avatar + '&linkId=' + props.msgItem.linkId
  })
}
</script>

<template>
  <view class="msg-list-item" @click="goChat">
    <view class="msg-common msg-avatar">
      <uv-avatar :src="msgItem.avatar" mode="aspectFill" size="43"></uv-avatar>
    </view>
    <view class="msg-common msg-content ">
      <view class="msg-content-item text-black text-df">{{ msgItem.name }}</view>
      <view class="msg-content-text text-gray text-sm">{{
          msgItem.lastMessage.length > 23
              ? msgItem.lastMessage.slice(0, 20) + '...'
              : msgItem.lastMessage
        }}
      </view>
    </view>
    <view class="msg-common msg-notice">
      <view class="msg-time text-gray" style="font-size: 10px">
        {{ formatTimeDifference(Date.parse(msgItem.lastTime), Date.now()) }}
      </view>
      <view v-if="msgItem.unreadNum>0" class=" bg-gradual-awGreen  text-white flex justify-center align-center"
            style="font-size: 10px;width: 20px;height: 20px;border-radius: 10px">{{ msgItem.unreadNum }}
      </view>
      <!--      <view v-else class="bg-gradual-awGreen  text-white flex justify-center align-center"-->
      <!--            style="width: 8px;height: 8px;border-radius: 4px;align-self: flex-end">-->
      <!--      </view>-->
    </view>
  </view>
</template>

<style lang="scss" scoped>
.msg-list {
  margin-top: 20rpx;
  background-color: #fff;
  width: 100%;

  &-item {
    width: 100%;
    height: 160rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 10rpx;

    .msg-common {
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .msg-avatar {
      flex: 2;
    }


    .msg-content {
      flex: 6;
      border-bottom: #e6e6e6 1px solid;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: center;
      gap: 30rpx;
    }

    .msg-notice {
      flex: 2;
      border-bottom: #e6e6e6 1px solid;
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      justify-content: flex-start;
      padding: 25rpx 30rpx 0 0;
      gap: 30rpx;
    }
  }
}
</style>